import React, { Component } from "react";
import { Route } from "react-router-dom";

//导入 Tab Bar
import { TabBar } from "antd-mobile";

import "./main.css";

import Index from "./Index/index";
import HouseList from "./HouseList";
import News from "./News";
import Profile from "./Profile";

const pathArray = [
  {
    path: "/home",
    component: Index,
    exact: true
  },
  {
    path: "/home/houselist",
    component: HouseList,
  },
  {
    path: "/home/news",
    component: News,
  },
  {
    path: "/home/profile",
    component: Profile,
  },
];

const tabBarArray = [
  {
    name: "首页",
    icon: "icon-ind",
  },
  {
    name: "找房",
    icon: "icon-findHouse",
  },
  {
    name: "资讯",
    icon: "icon-infom",
  },
  {
    name: "我的",
    icon: "icon-my",
  },
];

export default class Main extends Component {
  state = {};

  //渲染路由加载点
  renderRouteList() {
    return pathArray.map((i) => <Route key={i.path} {...i} />);
  }

  renderTabBar() {
    return (
      <TabBar tintColor="#21b97a" noRenderContent>
        {tabBarArray.map((i, idx) => (
          <TabBar.Item
            key={idx}
            title={i.name}
            icon={<i className={`iconfont ${i.icon}`} />}
            selectedIcon={<i className={`iconfont ${i.icon}`} />}
            selected={this.props.location.pathname === pathArray[idx].path}
            onPress={() => {
              this.props.history.replace(pathArray[idx].path);
            }}
          ></TabBar.Item>
        ))}
      </TabBar>
    );
  }

  render() {
    return (
      <div className="main">
        {/* 子路由 */}
        {this.renderRouteList()}
        {/* 导航条 */}
        {this.renderTabBar()}
      </div>
    );
  }
}
